/**
 * 学习目标：JSX使用的三个注意事项
 */

import React from 'react';
import ReactDOM from 'react-dom';

const divNode = (
  // 1. JSX有多行标签时， 必须有一个根节点, 推荐👍<></>包住多行代码,   React.Fragment代表空标签
  <>
    <ul>
      <li>香蕉</li>
      <li>橘子</li>
      <li>苹果</li>
    </ul>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    {/* 2. 标签必须有闭合标记 */}
    {/*❌ 没有/关闭标记，会直接报错 <input type="text" > */}
    <input type="text" id="box" />
    {/* 3. 两个关键字冲突： */}
    {/* 3.2 for  => htmlFor  */}
    <label htmlFor="box">放大input的可点击区域</label>
    {/*  3.1 class  => className */}
    <div className="xxx"></div>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
